<template>
	<u-popup :show="show" mode="bottom" round="20" @close="onClose">
		<view class="price-popup">
			<view class="popup-header flex">
				<text>价格详情</text>
				<u-icon name="close" size="30rpx" color="#333" @click="onClose"></u-icon>
			</view>
			<view class="popup-content">
				<view class="price-formula flex">
					<text class="label">充电时段</text>
					<text class="label">充电单价</text>
					<text class="label">=</text>
					<text class="label">电费</text>
					<text class="label">+</text>
					<text class="label">服务费</text>
				</view>
				<view class="price-list">
					<scroll-view scroll-y style="height: 600rpx;">
						<view class="price-item flex" :class="{'current': index === currentTimeSegmentIndex}"
							v-for="(item, index) in priceList" :key="index">
							<text class="time">{{ item.displayTime }}</text>
							<text class="total">{{ item.total }}</text>
							<text class="equal">=</text>
							<text class="power">{{ item.price }}</text>
							<text class="plus">+</text>
							<text class="service">{{ item.serviceFee }}</text>
						</view>

						<view class="empty" v-if="priceList.length === 0">
							<u-empty mode="data"></u-empty>
						</view>
					</scroll-view>
				</view>
				<view class="tips">红色价格为您当前可享受的价格，跨不同时段充电量，自动按分时段充电价格计费，实际支付以订单结算为准。</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			priceList: {
				type: Array,
				default: () => []
			},
			currentTimeSegmentIndex: {
				type: Number,
				default: -1
			}
		},
		methods: {
			onClose() {
				this.$emit('update:show', false)
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.price-popup {
		background: #fff;
		height: auto;
		max-height: 80vh;
		border-radius: 28rpx 28rpx 0 0;
		display: flex;
		flex-direction: column;

		.popup-header {
			padding: 30rpx;
			justify-content: space-between;
			align-items: center;
			flex-shrink: 0;

			text {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				font-family: "PINGFANG";
				flex: 2;
				text-align: center;
			}
		}

		.popup-content {
			padding: 0;
			flex: 1;
			height: 0;
			width: calc(100% - 60rpx);
			margin: 0 30rpx;

			.price-formula {
				justify-content: space-between;
				padding: 20rpx 0;

				.label {
					position: relative;
					font-size: 24rpx;
					color: #333;
					font-weight: 500;
					font-family: "PINGFANG";
					text-align: center;

					&:nth-child(1) {
						flex: 1.5;
					}

					&:nth-child(2) {
						flex: 1;
					}

					&:nth-child(3) {
						flex: 0.3;
					}

					&:nth-child(4) {
						flex: 1;
					}

					&:nth-child(5) {
						flex: 0.3;
					}

					&:nth-child(6) {
						flex: 1;
					}

					&::after {
						content: '';
						position: absolute;
						bottom: -30rpx;
						left: 50%;
						transform: translateX(-50%);
						font-size: 20rpx;
						color: #999;
						white-space: nowrap;
					}

					&:nth-child(2)::after {
						content: '(元/度)';
					}

					&:nth-child(4)::after {
						content: '(元/度)';
					}

					&:nth-child(6)::after {
						content: '(元/度)';
					}

					&:nth-child(3),
					&:nth-child(5) {
						flex: 0.5;

						&::after {
							content: none;
						}
					}
				}
			}

			.price-list {
				margin-top: 40rpx;

				.price-item {
					justify-content: space-between;
					padding: 20rpx 0;
					border: 1rpx solid #EEEEEE;
					border-radius: 12rpx;
					margin-bottom: 20rpx;

					text {
						font-size: 24rpx;
						color: #333;
						font-family: "PINGFANG";
						text-align: center;
						font-weight: 400;

						&.time {
							flex: 1.5;
						}

						&.total {
							flex: 1;
						}

						&.equal {
							flex: 0.3;
						}

						&.power {
							flex: 1;
						}

						&.plus {
							flex: 0.3;
						}

						&.service {
							flex: 1;
						}
					}

					.equal,
					.plus {
						flex: 0.5;
						color: #999;
					}

					&.current {
						background: #E5EFFF;
						border-color: #1C6EFB;

						.total {
							color: #FC0A01;
							font-weight: 600;
						}
					}
				}
			}

			.tips {
				font-size: 24rpx;
				color: #999;
				font-family: "PINGFANG";
				line-height: 1.5;
				margin: 30rpx 0;
			}
		}
	}
</style>